<template>
  <div class="flex flex-wrap-reverse">
    <div class="w-full py-4 lg:pt-8 lg:pb-4 text-center">
      <h1 class="text-4xl font-black mb-12 leading-none">
        {{ error.message }}
      </h1>

      <RouterLink to="/">
        <el-button type="primary">
          Go Back Home
        </el-button>
      </RouterLink>

      <img src="~assets/img/404-couple.png" class="mx-auto" />
    </div>
  </div>
</template>

<script>
export default {
  layout: 'NcBlogLayout',
  props: {
    error: {
      type: Object,
      default: () => ({
        message: 'Page Not Found',
      }),
    },
  },
  head() {
    return {
      title: this.error.message,
    }
  },
}
</script>
